<template>
  <div class="crud-table">
    <slot />
    <div class="crud-table-footer">
      <el-pagination background layout="total, prev, pager, next" v-bind="$attrs" :current-page="currentPage" :page-size="pageSize" :total="total" @current-change="onPageChange" />
    </div>
  </div>
</template>

<script>

export default {
  name: 'CrudTablePagination',
  props: {
    pageSize: {
      type: Number,
      default: 15
    }
  },
  data() {
    return {
      enablePagination: false,
      currentPage: 1,
      total: 0,
    }
  },
  provide() {
    return {
      enablePagination: () => this.enablePagination,
      currentPage: () => this.currentPage,
      defaultPageSize: () => this.pageSize,
      setTotal: v => this.total = v,
      setCurrentPage: v => this.currentPage = v
    }
  },
  inject: ['getTableDatas'],
  created() {
    this.enablePagination = true
    this.$parent.$_pagination = {
      enablePagination: () => this.enablePagination,
      currentPage: () => this.currentPage,
      defaultPageSize: () => this.pageSize,
      setTotal: v => this.total = v,
      setCurrentPage: v => this.currentPage = v
    }
  },
  methods: {
    onPageChange(val) {
      this.currentPage = val
      this.getTableDatas(false)
    }
  },
}
</script>
